<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="http://www.runoob.com/favicon.ico">

    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <script>
        function request(paras) {
            var url = location.href;
            var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
            var paraObj = {};
            for (i=0; j=paraString[i]; i++){
                paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);
            }
            var returnValue = paraObj[paras.toLowerCase()];
            if(typeof(returnValue)=="undefined"){
                return "";
            }
            else{
                return returnValue;
            } }

        function addResponseEvent(content,tftype,id,name,title,mid) {
            $("#response").on("click",function(){
                window.open(encodeURI("forward_message.html?action=response&mid="+mid+"&name="+name+"&title="+title+"&content=\""+content+"\"&tftype="+tftype+"&toid="+id));
            })
        }

        function addForwardEvent(content,title) {
            $("#forward").on("click",function(){
                window.open(encodeURI("forward_message.html?action=forward&title="+title+"&content=\""+content+"\""));
            })
        }

        function addDeleteEvent(mid) {
            $("#delete").on("click",function(){
                var data={};
                data.mid=mid;
                console.log(data);
                var url="delete_message.php";
                $.ajax({
                    type: 'post',
                    dataType: "json",
                    data: JSON.stringify(data),
                    url: url,
                    contentType : "application/text",
                    success: function (data) {
                        if(data.code==200) {
                            alert("删除成功！");
                            window.close();
                        }
                        else{
                            alert("删除失败！");
                        }
                    },
                    erro:function(data){
                        alert("ajax传输失败！");
                    }
                });
            });
        }

        $(document).ready(function() {
            var data={};
            data.mid=request("mid");
            data.type=request("type");
            console.log(data);
            url="display_message.php";
            $.ajax({
                type: 'post',
                dataType: "json",
                data: JSON.stringify(data),
                url: url,
                contentType : "application/text",
                success: function (data) {
                    if(request("type")=="receive"){
                        $("#message_info").text("在"+data.date+"时由"+data.name+"发送给您");
                        $("#title").text("标题:"+data.title);
                        $("#content").html("正文:<br>"+data.content);
                        $("#footer").append("<button type=\"button\" class=\"btn btn-default\" id=\"response\">回复</button>" +"&nbsp"+
                                "<button type=\"button\" class=\"btn btn-default\" id=\"forward\">转发</button>"+"&nbsp"+
                                "<button type=\"button\" class=\"btn btn-default\" id=\"delete\">删除</a>"
                        );

                        addResponseEvent(data.content,data.tftype,data.tfid,data.name,data.title,data.mid);
                        addForwardEvent(data.content,data.title);
                        addDeleteEvent(data.mid);
                     }
                    else{
                        $("#message_info").text("在"+data.date+"时由您发送给"+data.name);
                        $("#title").text("标题:"+data.title);
                        $("#content").html("正文:<br>"+data.content);
                        $("#footer").append("<button type=\"button\" class=\"btn btn-default\" id=\"response\">回复</button>" +"&nbsp"+
                                "<button type=\"button\" class=\"btn btn-default\" id=\"forward\">转发</button>"+"&nbsp"+
                                "<button type=\"button\" class=\"btn btn-default\" id=\"delete\">删除</a>"
                        );

                        addResponseEvent(data.content,data.tftype,data.tfid,data.name,data.title,data.mid);
                        addForwardEvent(data.content,data.title);
                        addDeleteEvent(data.mid);
                    }
                },
                erro: function (data) {
                    alert("ajax传输失败！");
                }

            });
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="jumbotron">
                <h1>
                    Hello, world!
                </h1>
                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title" id="message_info">
                    </h2>
                </div>
                <div class="panel-heading" id="title">
                    <h3 class="panel-title">
                    </h3>
                </div>
                <div class="panel-body" id="content">
                </div>
                <div class="panel-footer" style="text-align:right" id="footer">
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>